import BaseCell from '../BaseCell';
import { Text } from 'react-native';
import { Input } from 'beeshell';

function initItem(data, style) {
  if (data) {
    if (typeof data === 'string' || typeof data === 'number') {
      return this.render({
        style,
        is: Text,
        children: data
      });
    } else if (typeof data === 'function') {
      return data.call(this);
    } else {
      return this.render(data);
    }
  }
};


export default {
  isJiess: true,
  name: 'BaseItem',
  setup({
    label,
    labelStyle,
    leftStyle,
    content,
    contentStyle,
    middleStyle,
    value,
    valueStyle,
    rightStyle,
    bottom,
    childs,
    gutter = 4,
    ...params
  }) {
    this.add(
      this.render({
        is: BaseCell,
        // fullScreen: true,
        boxStyle: { marginBottom: 12 },
        leftStyle: {
          justifyContent: 'center',
          ...leftStyle,
        },
        middleStyle: {
          marginRight: gutter,
          marginLeft: gutter,
          ...middleStyle
        },
        rightStyle: {
          justifyContent: 'center',
          ...rightStyle
        },
        $slots: {
          left() {
            return initItem.call(this, label, labelStyle)
          },
          middle() {
            return initItem.call(this, content, contentStyle)
          },
          right() {
            return initItem.call(this, value, valueStyle)
          },
          bottom,
        },
      })
    );
  },
};
